<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反诈知识小挑战</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .game-container {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 600px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .game-header {
            margin-bottom: 20px;
        }
        
        h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 32px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .subtitle {
            color: #666;
            font-size: 16px;
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: bold;
            background: #f8f9fa;
            padding: 10px 20px;
            border-radius: 10px;
        }
        
        .timer {
            color: #e74c3c;
        }
        
        .question-box {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            margin: 20px 0;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            line-height: 1.5;
            border-left: 5px solid #4ecdc4;
            position: relative;
        }
        
        .question-number {
            position: absolute;
            top: -10px;
            left: 20px;
            background: #4ecdc4;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .buttons {
            display: flex;
            gap: 20px;
            margin: 25px 0;
        }
        
        button {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .true-btn {
            background: #4CAF50;
            color: white;
        }
        
        .false-btn {
            background: #f44336;
            color: white;
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .feedback {
            padding: 15px;
            border-radius: 10px;
            margin: 20px 0;
            font-weight: bold;
            font-size: 22px;
            display: none;
            animation: pop 0.5s;
        }
        
        @keyframes pop {
            0% { transform: scale(0.8); opacity: 0; }
            70% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .correct {
            background: #d4edda;
            color: #155724;
            display: block;
        }
        
        .wrong {
            background: #f8d7da;
            color: #721c24;
            display: block;
        }
        
        .start-btn {
            background: #2196F3;
            color: white;
            width: 100%;
            padding: 20px;
            font-size: 20px;
            margin-top: 10px;
        }
        
        .explanation {
            background: #fff3cd;
            color: #856404;
            padding: 15px;
            border-radius: 10px;
            margin: 10px 0;
            display: none;
            text-align: left;
        }
        
        .progress-bar {
            height: 10px;
            background: #e9ecef;
            border-radius: 5px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(90deg, #4ecdc4, #44a08d);
            width: 0%;
            transition: width 0.5s;
        }
        
        .result-screen {
            display: none;
            padding: 20px;
        }
        
        .score-display {
            font-size: 60px;
            font-weight: bold;
            margin: 20px 0;
            color: #4ecdc4;
        }
        
        .score-message {
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .celebration {
            font-size: 40px;
            margin: 10px 0;
        }
        
        .police-icon {
            font-size: 50px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="game-header">
            <h1>🛡️ 反诈知识小挑战</h1>
            <p class="subtitle">测试你的反诈能力，保护财产安全！</p>
        </div>
        
        <div class="stats">
            <div>得分: <span id="score">0</span>/100</div>
            <div>时间: <span id="time">120</span>秒</div>
        </div>
        
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
        
        <div class="question-box">
            <div class="question-number" id="qNum">1</div>
            <div id="question">点击开始按钮开始挑战！</div>
        </div>
        
        <div class="feedback" id="feedback"></div>
        <div class="explanation" id="explanation"></div>
        
        <div class="buttons">
            <button class="true-btn" onclick="checkAnswer(true)">✅ 正确</button>
            <button class="false-btn" onclick="checkAnswer(false)">❌ 错误</button>
        </div>
        
        <button class="start-btn" onclick="startGame()" id="startBtn">开始挑战</button>
        
        <div class="result-screen" id="resultScreen">
            <div class="police-icon">👮‍♂️</div>
            <h2>挑战完成！</h2>
            <div class="score-display" id="finalScore">0</div>
            <div class="score-message" id="scoreMessage"></div>
            <div class="celebration" id="celebration"></div>
            <button class="start-btn" onclick="resetGame()">再玩一次</button>
        </div>
    </div>

    <script>
        // 游戏数据 - 4道反诈判断题
        const questions = [
            {
                text: "接到自称是'公安局'的电话，说你涉嫌洗钱，要求你转账到'安全账户'证明清白，你应该立即照做。",
                isTrue: false,
                explanation: "这是典型的'冒充公检法'诈骗！公安机关不会通过电话要求转账，更不存在所谓的'安全账户'。"
            },
            {
                text: "网友推荐你一个'稳赚不赔'的投资平台，并展示了高额收益截图，你应该谨慎核实平台真实性。",
                isTrue: true,
                explanation: "正确！这是'杀猪盘'诈骗的常见手法，任何承诺'稳赚不赔'的投资都可能是骗局。"
            },
            {
                text: "收到'银行'短信说你的账户异常，并附带了链接让你点击处理，你应该立即点击链接查看。",
                isTrue: false,
                explanation: "这是钓鱼短信！不要点击任何可疑链接，应通过官方渠道联系银行核实。"
            },
            {
                text: "网购后接到'客服'电话说商品有问题要退款，但要求你提供短信验证码，你应该拒绝并挂断电话。",
                isTrue: true,
                explanation: "正确！验证码是资金安全的最后防线，任何索要验证码的都是诈骗！"
            }
        ];

        // 游戏变量
        let currentQuestionIndex = 0;
        let score = 0;
        let timeLeft = 120; // 2分钟
        let timer;
        let gameStarted = false;

        // 音效（使用浏览器内置的语音合成API）
        function playSound(isCorrect) {
            if ('speechSynthesis' in window) {
                const utterance = new SpeechSynthesisUtterance();
                utterance.text = isCorrect ? "你太棒了" : "不对嗷，继续努力";
                utterance.lang = 'zh-CN';
                utterance.rate = 1.0;
                utterance.pitch = isCorrect ? 1.2 : 0.9;
                speechSynthesis.speak(utterance);
            }
        }

        // 开始游戏
        function startGame() {
            if (gameStarted) return;
            
            gameStarted = true;
            score = 0;
            timeLeft = 120;
            currentQuestionIndex = 0;
            
            document.getElementById('score').textContent = score;
            document.getElementById('time').textContent = timeLeft;
            document.getElementById('startBtn').style.display = 'none';
            document.getElementById('resultScreen').style.display = 'none';
            updateProgress();
            
            // 开始计时器
            timer = setInterval(() => {
                timeLeft--;
                document.getElementById('time').textContent = timeLeft;
                
                if (timeLeft <= 0) {
                    endGame('时间到！');
                }
            }, 1000);
            
            showQuestion();
        }

        // 显示题目
        function showQuestion() {
            const question = questions[currentQuestionIndex];
            document.getElementById('question').textContent = question.text;
            document.getElementById('qNum').textContent = currentQuestionIndex + 1;
            document.getElementById('feedback').style.display = 'none';
            document.getElementById('explanation').style.display = 'none';
        }

        // 检查答案
        function checkAnswer(userAnswer) {
            if (!gameStarted) return;
            
            const question = questions[currentQuestionIndex];
            const feedback = document.getElementById('feedback');
            const explanation = document.getElementById('explanation');
            
            if (userAnswer === question.isTrue) {
                // 答对了
                score += 25;
                document.getElementById('score').textContent = score;
                feedback.textContent = '🎉 你太棒了！ +25分';
                feedback.className = 'feedback correct';
                playSound(true);
            } else {
                // 答错了
                feedback.textContent = '😅 不对嗷，继续努力！';
                feedback.className = 'feedback wrong';
                explanation.textContent = question.explanation;
                explanation.style.display = 'block';
                playSound(false);
            }
            
            feedback.style.display = 'block';
            updateProgress();
            
            // 下一题或结束游戏
            currentQuestionIndex++;
            if (currentQuestionIndex >= questions.length) {
                setTimeout(() => {
                    endGame('完成所有题目！');
                }, 2000);
            } else {
                setTimeout(() => {
                    showQuestion();
                }, 2000);
            }
        }

        // 更新进度条
        function updateProgress() {
            const progress = (currentQuestionIndex / questions.length) * 100;
            document.getElementById('progress').style.width = `${progress}%`;
        }

        // 结束游戏
        function endGame(reason) {
            clearInterval(timer);
            gameStarted = false;
            
            document.getElementById('finalScore').textContent = score;
            document.getElementById('resultScreen').style.display = 'block';
            
            // 根据得分显示不同评价
            let message = '';
            let celebration = '';
            
            if (score === 100) {
                message = '满分！你是反诈小能手！';
                celebration = '🎉🎊🏆';
            } else if (score >= 75) {
                message = '很棒！反诈知识掌握得不错！';
                celebration = '🎉👍';
            } else if (score >= 50) {
                message = '还可以，但还需要加强反诈知识学习！';
                celebration = '💪';
            } else {
                message = '要加油哦，多学习反诈知识保护自己！';
                celebration = '📚';
            }
            
            document.getElementById('scoreMessage').textContent = message;
            document.getElementById('celebration').textContent = celebration;
        }

        // 重置游戏
        function resetGame() {
            document.getElementById('resultScreen').style.display = 'none';
            document.getElementById('startBtn').style.display = 'block';
            document.getElementById('question').textContent = '点击开始按钮开始挑战！';
            document.getElementById('progress').style.width = '0%';
        }
    </script>
</body>
</html>